<template>
  <z-modal
    :width="800"
    v-bind="modalOption"
    :okText="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-form-model-item label="用户账号" prop="username">
          <a-input placeholder="请输入用户账号" :disabled="editType !== 'add' || disableSubmit" v-model.trim="form.username"/>
        </a-form-model-item>
        <a-form-model-item label="用户姓名" prop="nickname">
          <a-input placeholder="请输入用户姓名" v-model.trim="form.nickname" :disabled="disableSubmit"/>
        </a-form-model-item>
        <a-form-model-item label="邮箱" prop="email">
          <a-input placeholder="请输入邮箱" v-model.trim="form.email" :disabled="disableSubmit"/>
        </a-form-model-item>
        <a-form-model-item label="简介">
          <a-textarea placeholder="请输入简介" v-model.trim="form.introduction" :disabled="disableSubmit"/>
        </a-form-model-item>
        <a-form-model-item
          label="是否管理员"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-model="form.administrator" button-style="solid">
            <a-radio-button :value="true">是</a-radio-button>
            <a-radio-button :value="false">否</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="头像">
          <z-image-upload v-model.trim="form.avatar" :number="1"></z-image-upload>
        </a-form-model-item>
        <!-- <a-form-model-item
          label="是否有效"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-model="form.accountNonExpired">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="是否可用"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-model="form.accountNonLocked">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="凭证可用"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-model="form.credentialsNonExpired">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-model-item> -->
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ZImageUpload from '@/components/zz/ZImageUpload'
import ModalFormMixin from '@/mixins/ModalFormMixin'
import debounce from 'lodash/debounce'
import { duplicateCheck } from '@/services/common'
export default {
  name: 'UserModal',
  mixins: [ModalFormMixin],
  components: {
    ZImageUpload
  },
  data() {
    return {
      validatorRules: {
        username: [
          { required: true, message: '请输入用户账号!', trigger: 'change' },
          { validator: (rule, value, callback) => this.validateUsername(rule, value, callback), trigger: 'change' }
        ],
        nickname: [
          { required: true, message: '请输入姓名' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱格式!' }
        ]
      },
      url: {
        add: '/user/add',
        edit: '/user/edit'
      }
    }
  },
  methods: {
    addAfter() {
      this.$set(this.form, 'administrator', false)
    },
    validateUsername: debounce(function(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        duplicateCheck({
          tableName: 'mb_user',
          column: 'username_',
          key: value,
          exclude: this.editType === 'edit' ? value : ''
        }).then(res => {
          if (res.success) {
            res.result === 0 ? callback() : callback('用户账号已存在')
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    }, 400)
  }
}
</script>
